<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚滚屏动画</title>
    <link rel="stylesheet" href="css/cssreset.css">
    <link rel="stylesheet" href="css/cssreset-min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<!--第1屏内容-->
<section class="p1">
    <!--中间的内容-->
    <div class="p1-main stage">
        <ul class="stage">
            <li><img src="images/page1_main_1.png" alt=""></li>
            <li><img src="images/page1_main_2.png" alt=""></li>
            <li><img src="images/page1_main_3.png" alt=""></li>
            <li><img src="images/page1_main_4.png" alt=""></li>
            <li><img src="images/page1_main_5.png" alt=""></li>
        </ul>
    </div>
    <div class="p1-header">
        <img src="images/logo.png" alt="logo">
        <a href="javascript:;">立即下载</a>
    </div>
    <div class="p1-round">
        <img src="images/page1_3_round.png" alt="">
    </div>
</section>

<!--第2屏内容-->
<section class="p2 current">
    <!--背景-->
    <div class="p2-bg">
        <span class="p2-line"></span>
        <img class="p2-bg1" src="images/page2_glow.png"/>
        <img class="p2-bg2" src="images/page2_lineglow.png"/></div>
    <!--中间的内容-->
    <div class="p2-main stage">
        <ul class="stage">
            <li><img src="images/page2_main_1.png" alt=""></li>
            <li><img src="images/page2_main_2.png" alt=""></li>
            <li><img src="images/page2_main_3.png" alt=""></li>
            <li><img src="images/page2_main_4.png" alt=""></li>
        </ul>
    </div>
    <!--标题文字-->
    <div class="p2-title">
        <img src="images/page2_title.png"/>
        <h5>支持Chromium V40 稳定版</h5>
        <h5>Mac平台独家支持网址云安全检测</h5>
    </div>
</section>

<!--第3屏内容-->
<section class="p3 current">
    <!--背景-->
    <div class="p3-bg">
        <img class="p3-bg1"  src="images/page3_glow.png" alt="">
        <img class="p3-bg2" src="images/page3_logo.png" height="130" width="131"/></div>
    <!--标题-->
    <div class="p3-title">
        <img src="images/page3_title.png" alt="">
    </div>
    <!--内容-->
    <div class="p3-main stage">
        <ul class="stage">
            <li><img src="images/page1_3_round.png" alt=""></li>
            <li><img src="images/page1_3_round.png" alt=""></li>
            <li><img src="images/page1_3_round.png" alt=""></li>
        </ul>
    </div>
</section>

<!--第4屏内容-->
<section class="p4 current">
    <!--线条-->
    <div class="p4-line">
        <img src="images/page4_lineglow.png" alt="">
        <img src="images/page4_lineglow.png" alt="">
    </div>
    <!--主要内容-->
    <div class="p4-main stage">
        <ul>
            <li><img src="images/page4_main_clock.png" alt=""></li>
            <li><img src="images/page4_main_clockout.png" alt=""></li>
            <li><img src="images/page4_main_sheild.png" alt=""></li>
            <li><img src="images/page4_main_storm.png" alt=""></li>
            <li><img src="images/page4_main_xf.png" alt=""></li>
        </ul>
    </div>
    <!--标题-->
    <div class="p4-title">
        <div class="p4-title-left">
            <img src="images/page4_tag.png" alt="">
            <h5>BT/eMule/旋风文件一站式下载</h5>
        </div>
        <div class="p4-title-right">
            <img src="images/page4_title.png" height="71" width="300"/></div>
    </div>
</section>

<!--第5屏内容-->
<section class="p5 current">
    <!--标题-->
    <div class="p5-title">
        <div class="p5-title-left">
            <h5>双击关闭、超级拖拽、广告过滤</h5>
            <h5>恢复按钮、网银插件、截图</h5>
        </div>
        <div class="p5-title-right">
            <img src="images/page5_title.png" height="121" width="410"/></div>

    </div>

    <!--主要内容-->
    <div class="p5-main stage">
        <ul>
            <li><img src="images/page5_icon_1.png" alt=""></li>
            <li><img src="images/page5_icon_2.png" alt=""></li>
            <li><img src="images/page5_icon_3.png" alt=""></li>
            <li><img src="images/page5_icon_4.png" alt=""></li>
            <li><img src="images/page5_icon_5.png" alt=""></li>
            <li><img src="images/page5_icon_6.png" alt=""></li>
        </ul>
    </div>
</section>

<!--左边的logo图标-->
<div class="left_logo">
    <img src="images/logo_small.png" alt="logo" width="104" height="21">
    <a href="javascript:;">立即下载</a>
</div>

<!--右边的指示器圆点-->
<div class="gps">
    <ul>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<!--底部滚动小图标-->
<div class="scroll">
    <img src="images/scroll.png" alt="滚动屏幕">
</div>

<!--底部内容-->
<footer class="footer">
    <span class="footer-left">&copy;Tencent</span>
    <ul class="footer-right">
        <li><a href="javascript:;">2.0版官网 <span>|</span></a></li>
        <li><a href="javascript:;">历史版本下载 <span>|</span></a></li>
        <li><a href="javascript:;">PC 版 <span>|</span></a></li>
        <li><a href="javascript:;">论坛 <span>|</span></a></li>
        <li><a href="javascript:;">微博</a></li>
    </ul>
</footer>

<!--js库-->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/index.js"></script>

</body>
</html>